import { SvgComponent } from "@/components/base/Svg"
import { useSearchAction } from "@/features/useSearchAction"
import { formatCurrency } from "@/utils/format"
import styled from "@emotion/styled"
import { BaseRoundButton } from "./BaseRoundButton"

const TextButton = styled.span`
    font-weight: 700;
    font-size: 12rem;
`

const Container = styled.div`
    width: 160rem;
    height: 32rem;
    opacity: 0.2rem;
    border-radius: 18rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(13, 13, 18, 0.2);
    padding-left: 3rem;
    padding-right: 4rem;
`

const Amount = styled.div`
    display: flex;
    align-items: center;
`

const TextAmount = styled.span`
    font-weight: 500;
    font-size: 14rem;
    color: #fff;
    opacity: 0.7;
    padding-left: 4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55rem;
`
const IconPisoSvg = styled(SvgComponent("pages/HomePage/icon_piso.svg"))``

export const AuthedLoginButton = ({ balance }: { balance: string }) => {
    const { setAction } = useSearchAction()
    return (
        <Container>
            <Amount>
                <IconPisoSvg />
                <TextAmount>{formatCurrency(parseFloat(balance))?.replace("₱", "")}</TextAmount>
            </Amount>
            <BaseRoundButton
                width={64}
                height={24}
                children={
                    <TextButton
                        onClick={() => {
                            setAction("deposit")
                        }}
                    >
                        Deposit
                    </TextButton>
                }
            />
        </Container>
    )
}
